<template>
	<div class="index">
		<div class="index-contain">
			<p class="index-title animate__animated animate__flipInY">
				我们毕业啦
			</p>
			<div class="index-content animate__animated animate__slideInUp">
				<ul class="content-title animate__animated animate__fadeIn">
					<li>毕</li>
					<li>业</li>
					<li>快</li>
					<li>乐</li>
				</ul>
				<p>青春不散场, 梦想正起航</p>
				<div class="index-come">come on !</div>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped="scoped">
	.index{
		width: 100vw;
		height: 100vh;
		background: url('../../public/imgContext/fengmian.png') no-repeat;
		background-size: cover;
	}
	.index-contain{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}
	.index-title{
		width: 100%;
		font-size: 3em;
		color: #12933F;
		text-shadow: 0.15rem 0.15rem 0 white, 
					-0.15rem 0.15rem 0 white, 
					0.15rem -0.15rem 0 white, 
					-0.15rem -0.15rem 0 white;
		letter-spacing: 0.2em;
		font-weight: bold;
		text-align: center;
		margin-bottom: 1em;
		animation-delay: 0.5s;
	}
	.index-content{
		width: 90%;
		padding: 1em 0;
		border: 0.5em solid #12933F;
		border-top: 0.3em solid #12933F;
		border-bottom: 0.3em solid #12933F;
		border-radius: 0.5em;
		background-color: #fff;
		margin-bottom: 6em;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	
	.index-content > .content-title{
		position: absolute;
		top: 0;
		transform: translateY(-50%);
		display: flex;
		justify-content: space-around;
		align-items: center;
		animation-delay: 0.5s;
	}
	.index-content > .content-title > li{
		width: 2em;
		border-radius: 50%;
		background-color: #12933F;
		color: #fff;
		text-align: center;
		line-height: 2em;
		font-weight: bold;
		font-size: 1.5em;
	}
	
	.index-content > p{
		font-size: 1.4em;
		letter-spacing: 0.1em;
		font-weight: bold;
		padding: 1em 0;
		color: #12933F;
		opacity: 0;
		animation: slideLeft 1s 0.7s forwards;
	}
	.index-content > .index-come{
		padding: 0 1em;
		background-color: #FFB32D;
		line-height: 2em;
		font-weight: bold;
		font-size: 1.4em;
		text-align: center;
		text-transform: uppercase;
		color: #fff;
		opacity: 0;
		border-radius: 1em;
		animation: slideLeft 1s 0.7s forwards;
	}
	
	@keyframes slideLeft{
		from{
			transform: translateX(-100%);
		}
		to{
			opacity: 1;
			transform: translateX(0%);
		}
	}
	
</style>
